<template>
  <div class="container mx-auto p-4 h-full">
    <div class="flex space-x-2">
      <n-input placeholder="请输入用户微博ID" size="large" round></n-input>
      <n-button size="large" type="success" round class="bg-green-600">
        <n-icon size="22">
          <icon icon="mdi:account-search" class="text-white"></icon>
        </n-icon>
        识别
      </n-button>
      <n-button type="warning" size="large" round class="bg-orange-400">
        <n-icon size="22">
          <icon icon="mdi:subscriber-identity-module-outline" class="text-white"></icon>
        </n-icon>
        批量识别
      </n-button>
    </div>
    <div class="text-gray-400 ml-3 mb-3">注：支持输入多个微博ID，ID间用“，”隔开，或上传csv文件进行批量识别</div>
    <n-card class="rounded-2xl h-5/6">
      <div class="grid grid-cols-3 ">
        <div class="col-span-1">
          <n-input v-model:value="treePattern" placeholder="搜索"/>
          <n-tree
              block-line
              :pattern="treePattern"
              :data="treeData"
              :show-irrelevant-nodes="false"
              :node-props="TreeNodeProps"
          />
        </div>
        <div class="col-span-2 pl-3 border-l ml-3">
          <n-descriptions label-placement="top" bordered :column="2">
            <n-descriptions-item label="ID">
              1
            </n-descriptions-item>
            <n-descriptions-item label="用户名">
              z
            </n-descriptions-item>
            <n-descriptions-item label="用户名">
              z
            </n-descriptions-item>
            <n-descriptions-item label="用户名">
              z
            </n-descriptions-item>
            <n-descriptions-item label="用户名">
              z
            </n-descriptions-item>
            <n-descriptions-item label="用户名">
              z
            </n-descriptions-item>
            <n-descriptions-item label="用户名">
              z
            </n-descriptions-item>
            <n-descriptions-item label="用户名">
              z
            </n-descriptions-item>
          </n-descriptions>
        </div>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="ts">

import {Icon} from "@iconify/vue";
import {ref} from "vue";
import {TreeOption} from "naive-ui";

const treePattern = ref('')
const treeData = ref([
  {
    key: 1,
    label: '一级 1',
  },
  {
    key: 2,
    label: '一级 2',
  }
])
const TreeNodeProps = ({option}: { option: TreeOption }) => {
  return {
    onClick() {
      window.$message.info('点击' + option.label)
    }
  }

}
</script>

<style scoped>

</style>